<script lang="ts">
    import Title from "../../../components/Title/Title.svelte";
    import DeviceTarget from "../../../components/Device/DeviceTarget.svelte";
    import { DeviceStatus } from "../../../components/Device/type";
    import DeviceImg from "../../../components/Device/DeviceImg.svelte";
    import { targets } from "../stores";
</script>

<div class="h-full flex flex-col overflow-hidden">
    <Title title="设备状态显示" />
    <div class="flex-1 flex flex-col justify-center gap-4 overflow-hidden">
        <div class="basis-5/12 flex overflow-hidden justify-between">
            <div class="basis-1/4 w-1/4 aspect-square">
                <DeviceImg status={DeviceStatus.normal} />
            </div>
            <div class="basis-1/4 w-1/4 aspect-square">
                <DeviceImg status={DeviceStatus.warning} />
            </div>
            <div class="basis-1/4 w-1/4 aspect-square">
                <DeviceImg status={DeviceStatus.error} />
            </div>
            <div class="basis-1/4 w-1/4 aspect-square">
                <DeviceImg status={DeviceStatus.offline} />
            </div>
        </div>
        <div class="basis-5/12 flex overflow-hidden">
            <div class="basis-1/4">
                <DeviceTarget
                    status={DeviceStatus.normal}
                    label="正常"
                    value={$targets.normal}
                />
            </div>
            <div class="basis-1/4">
                <DeviceTarget
                    status={DeviceStatus.warning}
                    label="告警"
                    value={$targets.warning}
                />
            </div>
            <div class="basis-1/4">
                <DeviceTarget
                    status={DeviceStatus.error}
                    label="异常"
                    value={$targets.error}
                />
            </div>
            <div class="basis-1/4">
                <DeviceTarget
                    status={DeviceStatus.offline}
                    label="离线"
                    value={$targets.offline}
                />
            </div>
        </div>
    </div>
</div>

<style>
    .border-14424b {
        border-color: #14424b;
    }
</style>
